/*
 * Copyright © 2016-2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../../styles/variables.scss";
$entity-list-header-background-color: #efefef;
$entity-list-header-border-color: darken($entity-list-header-background-color, 15%);
$entity-list-header-height: 50px;
$search-box-width: 250px;
$filter-and-sort-box-width: 150px;
$border-color: rgba(0, 0, 0, 0.15);
$margin-to-border: 0.5rem;

.entity-list-header-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 50px;
  background-color: $entity-list-header-background-color;
  border-bottom: 1px solid $grey-05;

  .plus-button {
    margin: 20px 20px 0;
    .popper {
      display: none;
    }
  }
  .entity-list-header {
    height: $entity-list-header-height;
    z-index: 500;
    display: flex;
    align-items: center;

    .search-box {
      width: $search-box-width;
      padding-left: 16px;

      .input-group-text {
        background-color: #ffffff;
      }

      .icon-search {
        color: $border-color;
      }

      .search-input {
        background-clip: border-box;
      }
    }

    .filter,
    .sort {
      font-size: 14px;
      display: flex;
      align-items: center;

      .dropdown {
        width: 100%;
        cursor: pointer;

        .filter-toggle,
        .sort-toggle {
          width: 100%;
          display: flex;
          align-items: center;

          span:first-child {
            margin-left: $margin-to-border;
          }

          span:last-child {
            margin-left: auto;
            margin-right: $margin-to-border;
          }
        }

        .dropdown-menu {
          width: $filter-and-sort-box-width;
          left: -1px;
          border: 1px solid $entity-list-header-border-color;
          border-top: 0;
          z-index: 1002;
          max-height: 235px;
          overflow-y: auto;
          padding: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;

          input[type="checkbox"] {
            margin-top: 3px;
          }
        }

        .dropdown-item {
          background-color: white;
          line-height: initial;
          text-align: left;
          padding: 10px;
          cursor: pointer;

          span { line-height: initial; }
          &:focus { outline: 0; }
          &:hover {
            background-color: #e6e6e6;
          }
        }
      }
    }

    .filter {
      width: $filter-and-sort-box-width;
      height: 30px;
      background-color: #ffffff;
      margin-left: 10px;
      border: 1px solid $border-color;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;

      .dropdown-menu {
        width: $filter-and-sort-box-width;
        top: 24px;

        .form-check-label {
          padding-left: 0;
        }
        .form-check {
          margin: 0;
        }
      }
    }

    .sort {
      margin-left: 20px;

      .sort-label {
        font-size: 12px;
        font-weight: bold;
        float: left;
      }

      .dropdown {
        width: $filter-and-sort-box-width;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #ffffff;
        margin-left: 10px;
        border: 1px solid $border-color;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;

        .dropdown-menu {
          top: 28px;

          .dropdown-item {

            .fa-check {
              padding-right: $margin-to-border;
            }
          }
        }
      }
    }
  }
}
